<!DOCtag html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<th:block th:insert="common/fragment :: icon"></th:block>
	<title>标签管理</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
	<link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>

<body>
	<!-- 导航栏部分 -->
	<nav th:replace="common/admin-frag :: firstmenu(3)"></nav>
	<!-- 二级导航 -->
	<div th:replace="common/admin-frag :: secondmenu(2,~{::#a1},~{::#a2})">
		<a id="a1" href="#" th:href="@{/admin/tags/input}" class="item" th:classappend="${n==1} ? 'teal active'">新增</a>
		<a id="a2" href="#" th:href="@{/admin/tags}" class="item" th:classappend="${n==2} ? 'teal active'">列表</a>
	</div>

	<!-- 中间部分 -->
	<div class="m-container-small m-padded-tb-big">
		<div class="ui container">
			<!--操作是否成功的信息提示-->
			<div class="ui success message" th:unless="${#strings.isEmpty(message)}">
				<i class="close icon"></i>
				<div class="header">提示：</div>
				<p th:text="${message}">恭喜，操作成功!</p>
			</div>
			<!-- 表格展示 -->
			<table class="ui teal center aligned celled table">
				<thead>
					<tr>
						<th></th>
						<th>标签</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="tag,iterStat : ${page.content}">
						<td th:text="${iterStat.count}"></td>
						<!--iterStat称作状态变量，属性有：
						index:当前迭代对象的index（从0开始计算）
						count: 当前迭代对象的index(从1开始计算)
						size:被迭代对象的大小
						current:当前迭代变量
						even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
						first:布尔值，当前循环是否是第一个
						last:布尔值，当前循环是否是最后一个-->
						<td th:text="${tag.name}"></td>
						<td>
							<a href="#" th:href="@{/admin/tags/{id}/input(id = ${tag.id})}" class="ui mini teal basic button">编辑</a>
							<a href="#" th:href="@{/admin/tags/{id}/delete(id = ${tag.id})}" class="ui mini orange basic button">删除</a>
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<th colspan="6">
							<div class="ui mini left floated pagination menu" th:if="${page.totalPages}>1">
								<a th:href="@{/admin/tags(page=${page.number}-1)}" th:unless="${page.first}" class="icon item"><!--上一页-->
								  <i class="left chevron icon"></i>
								</a>
								<a th:href="@{/admin/tags(page=${page.number}+1)}" th:unless="${page.last}" class="icon item"><!--下一页-->
								  <i class="right chevron icon"></i>
								</a>
							</div>
							<a href="#" th:href="@{/admin/tags/input}" class="ui mini right floated teal basic button m-margin-tb-tiny">添加</a>
						</th>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>

	<!-- 底部部分 -->
	<footer th:replace="common/fragment :: footer"></footer>

	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
	<script src="../../static/js/me.js" th:src="@{/js/me.js}"></script>

	<script>
		$('.menu.toggle').click(function () {
			$('.m-item').toggleClass('m-mobile-hide'); /* 记住不用加点 */
		});
		// 账号下拉列表
		$('.ui.dropdown').dropdown();
		//关闭操作提示的初始化
		$('.message .close').on('click', function () {
			$(this).closest('.message').transition('fade');/*fade:褪色，会慢慢的关闭*/
		});
	</script>
</body>

</html>